<template>
    <div class="radioGroupBtn">
        <div class="radioGroupBtn-item" :class="key == item.id ?'radioGroupBtn-items':''" :style="props.width?`width:${props.width};padding:0 0px;text-align:center`:'padding:0 12px;'" v-for="(item, index) in props.list" @click="select(item.id)">
            {{ item.name || item.text}} 
        </div>
    </div>
</template>
<script setup lang="ts">
    const emit = defineEmits(['change']);
    const props = defineProps<{
        list: any, // 标签列表
        value?:number |string
        width?:string
    }>()


   
    const key = ref<number>(props.value || props.list[0].id) // 选中标签的key
    const select = (id: number) => {
        // 触发选择事件
        key.value = id
        //console.log(key.value);
        
        callParent()
    }
    const callParent = () => {
        emit('change', key.value);
    };
    
</script>
<style lang="scss">
    .radioGroupBtn{
        display: inline-flex;
        flex-wrap: wrap;
        gap: 8px;
        background-color: rgba(245, 245, 245, 1);
        border-radius: 4px;
        padding:2px;
        border: 1px solid #EFEFEF;
        *{
            box-sizing: border-box;
        }
        .radioGroupBtn-item {
            display: flex;
            padding: 4px 24px;
            flex-wrap: wrap;
            cursor: pointer;
            text-align: center;
            font-size: 16px;
            justify-content: center;
            line-height: 30px;
            position: relative;
        }
        .radioGroupBtn-items{
            color: var(--el-color-primary) !important;
            background-color: #fff;
        }
       
        
    }
</style>